oncalendarselect Event

This event is executed when you click the calendar icon in a cell. The calendar icon is displayed if this event is attached to the column, and if the focus is on the cell in the column. This event is supported for columns of theinputfieldType. You can also define a custom calendar application (not part of XGrid) in the handler of this event.

Syntax

Inline HTML

<div cordysType="wcp.library.ui.XGrid" id="xgridId ()">
    <div dataType="date" fieldType="input" id="columnId"
        oncalendarselect="handler" ref="columnRef">columnLabel</div>
   ...
</div>

Event Information

To invoke	Click the calendar icon in a cell.
Default Action	Initiates any action associated with this event.

Event Object Properties

Although event handlers in the DHTML Object Model do not receive parameters directly, a handler can query an event object for data.

Property	Description
businessObject	XML node of the business object associated with the row.
columnId	Read-only. String that refers to the identifier of the column of the cell, for which the event is executed.
data	XML node that is the basis for the content in the XGrid.
dataNode	XML data node associated with the cell.
getCells()	Returns an array of cell objects.
getIndex()	Returns the row index, where the index of the first row is '1'.
returnValue	Boolean. If set to false, the event is cancelled.
row	Refers to the HTML node of the unfrozen part of a row.
rowData	XML node of the data of a row.
rowFreezeColumn	Refers to the HTML node of the frozen part (if any) of a row.
srcElement	HTML node of the cell.
value	The value or cell content to be displayed in the cell.

Remarks

A cell can not be associated with both a zoom dialog and a calendar control. In case both are defined, the zoom dialog takes precedence over the calendar control.

Example

The following example demonstrates the use of this event.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html onapplicationready="fillXGrid()">
<head>
     <meta content="Web Generator" name="Generator"/>
     <meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>
     <title>oncalendarselect event</title>
<script src="/cordys/wcp/application.js"></script> 

<script type="cordys/xml" id="fieldsXML">
     <data></data>
</script>
<script type="cordys/xml" id="newNode">
     <fields>
         <field1></field1>
         <field2></field2>
     </fields>
</script>
<script>
var XMLNode;
/*creates sample data to fill XGrid*/
function fillXGrid()
 {
         XMLNode =cordys.cloneXMLDocument(fieldsXML.XMLDocument);
	     var dataNode = cordys.selectXMLNode(XMLNode,".//*[local-name()='data']");

   for (var i=0 ; i<20 ; i++ )
      {
         
         var newRow = cordys.cloneXMLDocument(newNode.XMLDocument);
         cordys.setTextContent(cordys.selectXMLNode(newRow,".//*[local-name()='field1']"), "field1_" + i)
        
         	//generate a random date
         	var year = 1990 + Math.ceil(20*Math.random());
          var month = Math.ceil(9*Math.random());
          var day = Math.ceil(9*Math.random());
          cordys.setTextContent(cordys.selectXMLNode(newRow,".//*[local-name()='field2']"),year + "-0" + month + "-0" + day);
          cordys.appendXMLNode(newRow.documentElement,dataNode)
      }
      myGrid.bindData( XMLNode );
   }
function handleCalendar()
   {
      var evnt = window.application.event;
      //start your own date select/ calendar application
      //evnt.value = date from calendar application
      application.notify("2007-07-07 will be set as new date");
      evnt.value = "2007-07-07";
   }
</script>
</head>
<body>
<div cordysType="wcp.library.ui.XGrid"
        		id="myGrid" 
          xpathRowData = "data/fields"
        		xpathBusinessObject = "."
        		style="width:400;height:200">
     <div id="field1" ref="field1">field1</div>
     <div id="field2" ref="field2" dataType="date" 
 	          oncalendarselect="handleCalendar()">Date</div>
</div>
</body>
</html>